<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>超市零售系统</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <link th:href="@{/vendor/fonts/circular-std/style.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/libs/css/style.css}">
    <link rel="stylesheet" th:href="@{/vendor/fonts/fontawesome/css/fontawesome-all.css}">
    <link rel="stylesheet" th:href="@{/vendor/datepicker/tempusdominus-bootstrap-4.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/inputmask/css/inputmask.css}"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin-top: 10px;
            width: 400px;
            border: 2px solid #000;
            border-collapse: collapse;
        }

        table thead tr {
            background-color: purple;
            color: #e0e0e0;
        }

        table tr {
            background-color: pink;
        }

        table td {
            text-align: center;
            border: 1px solid #000;
        }

        table td:nth-child(1) {
            width: 100px;
        }

        table td:nth-child(2) {
            width: 300px;
        }
    </style>
</head>

<body>
<div class="dashboard-main-wrapper">
    <!-- navbar -->
    <div class="dashboard-header">
        <div th:insert="~{commons/commons::topBar}"></div>
    </div>
    <!-- left sidebar -->
    <div class="nav-left-sidebar sidebar-dark">
        <div class="menu-list">
            <div th:insert="~{commons/commons::sideBar}"></div>
        </div>
    </div>
    <!-- wrapper  -->
    <div class="dashboard-wrapper">
        <div class="container-fluid  dashboard-content">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="page-header">
                        <h2 class="pageheader-title">收银业务</h2>
                        <p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit
                            amet vestibulum mi. Morbi lobortis pulvinar quam.</p>
                        <div class="page-breadcrumb">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="form-group" style="clear:both;">
                <div class="card">
                    <h5 class="card-header">请输购买的商品</h5>
                    <div align="center">
                        <label for="">请输入姓名：</label>
                        <input type="text" class="uname"><br/>
                        <label for="">请输入邮箱：</label>
                        <input type="email" class="email"><br/>
                        <button class="abutton">添加</button>
                        <br/>
                        <table>
                            <thead>
                            <tr>
                                <td>姓名</td>
                                <td>邮箱</td>
                            </tr>
                            </thead>
                            <tbody>
                            <!--    动态添加内容  -->
                            <tr>
                                <td>姓名</td>
                                <td>邮箱</td>
                            </tr>
                            </tbody>
                        </table>
                        <br>
                        <br>
                        <br>
                    </div>

                    <script>
                        // 获取元素
                        var uname = document.querySelector('.uname');
                        var email = document.querySelector('.email');
                        var btn = document.querySelector('.abutton');
                        var tbody = document.querySelector('tbody');

                        btn.onclick = function () {
                            //检测输入的内容不为空
                            if (uname.value === '' || email.value === '')
                                alert('请输入内容');
                            else {
                                //创建节点
                                var tr = document.createElement('tr');
                                var td1 = document.createElement('td');
                                var td2 = document.createElement('td');
                                //获取元素内容
                                td1.innerHTML = uname.value;
                                td2.innerHTML = email.value;
                                //添加内容到表格中
                                tr.append(td1);
                                tr.append(td2);
                                tbody.append(tr);
                            }
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div class="container-fluid">
            <div th:insert="~{commons/commons::footer}"></div>
        </div>
    </div>
</div>
<script th:src="@{/vendor/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.js}"></script>
<script th:src="@{/vendor/slimscroll/jquery.slimscroll.js}"></script>
<script th:src="@{/vendor/multi-select/js/jquery.multi-select.js}"></script>
<script th:src="@{/libs/js/main-js.js}"></script>
<script th:src="@{/vendor/datatables/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/vendor/datatables/js/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/vendor/datatables/js/data-table.js}"></script>
</body>
</html>